<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="css/bootstrap3.3.7.min.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script>
</head>
<body>
	<span id="block" style="background-color: red">blockdiv</span>
	<span style="display: block;"></span>
	<button id="big">big</button>
	<button id="small">small</button>
		<button id="left">left</button>
	<button id="right">right</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body" style="text-align: center; font-family: '微软雅黑';">
				为了您的良好体验，请使用IE8以上浏览器
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
	
	<script>
		
	$("#big").click(function () {

	    $("#block").animate({

	        width: "900px",

	        height: "500px",

	        fontSize: "10em",

	    }, 3000);

	});
	$("#small").click(function () {

	    $("#block").animate({

	        width: "90px",

	        height: "50px",

	        fontSize: "1em",
	    }, 3000);

	});


	$("#right").click(function () {

	$("#block").animate({ left: '+50px' }, "slow");

	});

	$("#left").click(function () {

	$("#block").animate({ left: '-50px' }, "slow");

	}); 
	
	$(function(){
	$('#myModal').modal('show')
	setTimeout(function(){$("#myModal").modal("hide")},3000);
	})
	//$('#myModal').modal('hide')
	</script>
</body>
</html>